<template>
  <el-dialog
    :title="formData.id?'编辑角色':'新增角色'"
    :visible.sync="showDialog"
    @close="closeFn"
  >
    <!-- showDialog: 值为true表示显示，false表示隐藏弹窗 -->
    <!--
        表单验证
        1、给form组件绑定model，值为表单对象
        2、给form组件绑定rules属性，规定校验规则
        3、给form-item组件绑定prop属性
        4、给表单v-model双向绑定
     -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="formData.description" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { addRole, getRoleDetail, editRole } from '@/api/setting'
export default {
  props: { // vue规定props中的数据是只读的
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '', // 角色名称
        description: '' // 角色描述
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空！', trigger: 'blur' },
          { min: 1, max: 10, message: '角色名称长度1到10位！', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取角色详情
    async getRoleDetail(id) {
      const res = await getRoleDetail(id)
      // console.log(61, res)
      // 回显
      this.formData = res.data.data
    },
    // 确定 新增/编辑
    submit() {
      // 表单校验 --- 校验同调用接口
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.formData.id) {
            // 编辑
            await editRole(this.formData)
          } else {
            // 校验通过 调用新增接口
            await addRole(this.formData)
          }
          //   关闭弹窗
          //  子组件不能直接修改父组件元素，这样会导致父子组件数据不一致
          //   this.showDialog = false
          // 所以我们需要通过子传父技术通知父组件修改showDialog的值
          this.closeFn()
          // 更新浏览器中显示的列表
          this.$emit('updateEvent')
        }
      })
    },
    // 关闭弹窗
    closeFn() {
      // 自定义事  子传父的关闭弹窗
    //   this.$emit('closeEvent')
      //   有没有一个种方法，可以简化关闭功能，父组件不需要绑定事件
      //   答：有，我们可以通过vue提供修饰符sync来替换父组件的绑定自定义事件
      /**
       * 使用语法:
       * 子组件：
       *  this.$emit('update:要修改的props属性名', 更新的值)
       * 父组件：
       * <AddRole 属性名.sync="父组件中的变量"></AddRole>
       *
      */
      this.$emit('update:showDialog', false)
      // 手动  清空数据
      this.formData = {
        name: '', // 角色名称
        description: '' // 角色描述
      }
      //   清空校验规则、清空绑定在表单的数据
      //   如果formData里面存在没有绑定在表单中的数据的话是不能
      // 够通过这个方法清空的，所以这种情况下我们就要手动清空
      //   什么情况下 formData中会存在绑定在表单之外的数据呢？
      //   答：因为通过情况下我们会复用弹窗组件，所以在编辑的情况下会出现这种情况
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style scoped>
</style>
